import { useState, useEffect } from 'react';
import { Popup, Picker } from 'react-vant';
import './index.less';
import {
  staticActionList,
  timeColumn,
  tempColumn,
  deviceId
} from '../../utils/staticData';
import { IActionData } from '../../types/IContext';

export default function Action({
  propsAction,
  onActionChange,
  onLoopClick
}: any) {
  const Hejia = (window as any).Hejia;
  const { isOnline, status, mode, temperature, workTime } = propsAction;
  const [visibleStr, setVisibleStr] = useState<String>('');
  const [tempValue, setTempValue] = useState<string[]>(['80']);
  const [timeValue, setTimeValue] = useState<string[]>(['1']);

  const state = {
    timeVisible: 'time',
    tempVisible: 'temp'
  };
  let _staticActionList = staticActionList;
  // 烹饪温度
  useEffect(() => {
    _staticActionList[0].num = temperature ? `${temperature}°C` : '未设置';
    setTempValue([`${temperature}`]);
  }, [temperature]);

  // 工作时长
  useEffect(() => {
    _staticActionList[1].num = workTime ? `${workTime}min` : '未设置';
    setTimeValue([`${workTime}`]);
  }, [workTime]);

  const onClose = () => {
    setVisibleStr('');
    onLoopClick(true);
  };
  const onOpen = () => {
    onLoopClick(false);
  };

  const itemEle = _staticActionList.map((item: IActionData) => {
    return (
      <div className="action-item" key={item.id}>
        {(!isOnline || (status === 0 && mode === 0) || status === 1) && (
          <div className="mask"></div>
        )}
        <div className="content" onClick={() => setVisibleStr(item.key)}>
          <div className="left">
            <div className="title">{item.title}</div>
            <div className="num">{item.num}</div>
          </div>
          <i className="iconfont icon-arrow" />
        </div>
      </div>
    );
  });

  return (
    <div className="action">
      {itemEle}
      {/* 温度弹框 */}
      <Popup
        round
        visible={state.tempVisible === visibleStr}
        position="bottom"
        onOpen={onOpen}
        onClose={onClose}
      >
        <div className="time-wrapper">
          <Picker
            value={tempValue}
            title="烹饪温度"
            placeholder=""
            confirmButtonText="确定"
            columns={tempColumn()}
            onChange={(val: any): void => {
              setTempValue([val]);
            }}
            onCancel={() => onClose()}
            onConfirm={() => {
              const mins: number = Number(tempValue[0]);
              onActionChange(mins, 'temp');
              onClose();
              Hejia.setControlParam(
                {
                  // deviceId,
                  parameters: {
                    param: [
                      {
                        name: 'temperature',
                        content: mins
                      }
                    ]
                  }
                },
                function () {
                  // success, no response
                  console.log('success');
                },
                function (msg: string, obj: any) {
                  console.log(msg + obj.resultCode + obj.resultCodeMessage);
                }
              );
            }}
          />
          <div className="unit">°C</div>
        </div>
      </Popup>

      {/* 时间弹框 */}
      <Popup
        round
        visible={state.timeVisible === visibleStr}
        position="bottom"
        onOpen={onOpen}
        onClose={onClose}
      >
        <div className="time-wrapper">
          <Picker
            title="烹饪时间"
            value={timeValue}
            placeholder=""
            confirmButtonText="确定"
            columns={timeColumn()}
            onChange={(val: any): void => {
              setTimeValue([val]);
            }}
            onCancel={() => onClose()}
            onConfirm={() => {
              const mins: number = Number(timeValue[0]);
              onActionChange(mins, 'time');
              onClose();
              Hejia.setControlParam(
                {
                  // deviceId,
                  parameters: {
                    param: [
                      {
                        name: 'workTime',
                        content: mins
                      }
                    ]
                  }
                },
                function () {
                  // success, no response
                  console.log('success');
                },
                function (msg: string, obj: any) {
                  console.log(msg + obj.resultCode + obj.resultCodeMessage);
                }
              );
            }}
          />
          <div className="unit">分钟</div>
        </div>
      </Popup>
    </div>
  );
}
